<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import geoCoord from "@/data/odline-geocoord"
import srcMigrationData from "@/data/odline-srcmigration"

export default {
    name: "AddOdlineCurves.component",
    components: {Maptalks},
    setup() {

        const getGeoCoord = (name) => {
            let city = name.split("_").pop();
            let coord;
            coord = geoCoord[city];
            return coord;
        }

        let mapOnLoadCB = (map) => {
            map.setZoom(6)

            let lines = srcMigrationData.allLine.map(function (line) {
                return {
                    "coordinates": [
                        map.getCenter().toArray(),
                        getGeoCoord(line.end)
                    ]
                };
            });

            // destination markers
            let destinations = lines.map(function (ln) {
                return new maptalks.Marker(ln["coordinates"][1], {
                    "symbol": {
                        "markerType": "ellipse",
                        "markerFill": "rgba(248,3,11,0.4)",
                        "markerLineWidth": 2,
                        "markerWidth": 4,
                        "markerHeight": 4
                    }
                })
            })

            new maptalks.VectorLayer(MapLayerConst.MAP_OD_LINE_CURVES_MARKER_LAYER).addGeometry(destinations).addTo(map);

            //curves
            let lineLayer = new maptalks.ODLineLayer(MapLayerConst.MAP_OD_LINE_BASE_LAYER, lines, {
                "animation": false,
                "curveness": 0.5,
                "random": true,
                "symbol": {
                    "lineWidth": 2,
                    "color":"rgba(3,145,248,0.4)"
                }
            }).addTo(map);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>